<template>
	<view class="songSubmit">
		<!-- <view class="map">map</view> -->
		<!-- 取货地址 -->
		<view class="quAdress" @click="writeAddressShow = true">
			<view class="quInformation">
				<view class="quName">填写取货地址</view>
				<view class="phone">17695200000</view>
			</view>
			<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
		</view>
		<!-- 取货信息表单弹窗 -->
		<u-popup v-model="writeAddressShow" :closeable="true" mode="bottom">
				<addressInfo :form="quAddressForm" @submitzi="submitfu"></addressInfo>
				<view @click="submitfu"></view>
		</u-popup>
		
		<!-- 收货地址 -->
		<view class="songAdress" @click="writeAddressShow = true">
			<view class="songInformation">
				<view class="songName">填写收货地址</view>
				<!-- <view class="phone">17695200000</view> -->
			</view>
			<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
		</view>
		<!-- 收货地址表单弹窗 -->
		<!-- <u-popup v-model="writeAddressShow">
				<addressInfo></addressInfo>
		</u-popup> -->
		
		<view class="orderInformation">
			<!-- 取件时间 -->
			<view class="quTime order_item" @click="quTimeShow = true">
				<view>取件时间</view>
				<u-picker v-model="quTimeShow" mode="time" :params="params" @confirm="timeComfirm"></u-picker>
				<view>{{orderInfo.quTime}}<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 物品信息 -->
			<view class="goodsInformation order_item" @click="wupinshow = true">
				<view>物品信息</view>
				<view>{{orderInfo.goodInfo}}<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 选择物品信息弹窗 -->
			<u-popup v-model="wupinshow" :mask-close-able="false" mode="bottom" width="400rpx" height="600rpx" border-radius="14" :closeable="true">
				<view>选择商品类型和重量</view>
				<view>物品类型</view>
				<!-- 物品类型单选框 -->
				<u-radio-group v-model="typeValue" @change="radioTypeGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in typeList" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
				<view>物品重量</view>
				<!-- 物品重量单选框 -->
				<u-radio-group v-model="weightValue" @change="radioWeightGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in weightList" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
				<u-button type="primary"@click="clickConfrim">确定</u-button>
				
			</u-popup>
			<!-- 订单备注 -->
			<view class="remark order_item" @click="beizhushow = true">
				<view>备注</view>
				<view>{{orderInfo.beizhuInfo}}<u-icon name="arrow-right"></u-icon>
				</view>
				
			</view>
			<!-- 订单备注弹窗 -->
			<u-popup v-model="beizhushow" :mask-close-able="false" mode="bottom" width="400rpx" height="600rpx" border-radius="14" :closeable="true">
				<view style="padding-top: 100rpx;">
					<u-field v-model="orderInfo.beizhuInfo" label="备注:" placeholder="输入备注信息">
					</u-field>
					<u-button type="primary" @click="beizhuConfirm">确定</u-button>
				</view>			
			</u-popup>
			<!-- 订单小费 -->
			<view class="tip order_item" @click="xiaofeishow = true" >
				<view>小费</view>
				<view>{{orderInfo.xiaofei}}<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 订单小费弹窗 -->
			<u-popup  v-model="xiaofeishow" :mask-close-able="false" mode="bottom" height="600rpx" border-radius="14" :closeable="true">
					<view style="padding-top:100rpx;">
						<u-field maxlength="4" type="number" v-model="orderInfo.xiaofei" label="小费(单位:元):" placeholder="输入小费金额" label-width="190">
						</u-field>	
						<u-button type="primary" @click="xiaofeiConfirm">确定</u-button>
					</view>
			</u-popup>
			<!-- 支付方式 -->
			<view class="payMethods order_item">
				<view>支付方式</view>
				<view>货到付款<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
			</view>
		</view>
		
		<view class="submitSongOrder">
			<view class="fei">跑腿费￥--{{fee}}</view>
			<u-button type="primary" size="medium"  @click="submitOrder">提交订单</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fee:"",
				quAddressForm:{
					shouAdress: '',
					doorNumber: '',
					connectionPeople: '',
					phone: ''
				},
				writeAddressShow:'',
				orderInfo:{
					goodInfo:"请选择物品信息",
					goodsWeight:"物品重量",
					goodsType:"物品类型",
					xiaofei:"加小费抢单更快哦 ",
					quTime:"立即取件",
					beizhuInfo: "物品描述，送件要求等",
					quAddressForm:{}
				},			
				typeValue:'',
				weightvalue: '',
				wupinshow:false,
				xiaofeishow:false,
				beizhushow: false,
				quTimeShow: false,
				quTimeList: [{
						value: '1',
						label: '货到付款'
					},
					{
						value: '2',
						label: '在线支付'
					}
				],
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				typeList: [{
						name: '日用品',
						disabled: false
					},
					{
						name: '食品',
						disabled: false
					},
					{
						name: '文件',
						disabled: false
					},
					{
						name: '数码产品',
						disabled: false
					},
					{
						name: '衣服',
						disabled: false
					},
					{
						name: '医药品',
						disabled: false
					}
				],
				weightList: [{
						name: '<5KG',
						disabled: false
					},
					{
						name: '5KG-10KG',
						disabled: false
					},
					{
						name: '10KG以上',
						disabled: false
					},
					
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				
			}
		},
		onLoad() {
			
			
		},
		methods: {
			QuAdressInfo() {
				uni.navigateTo({
					url: '/pages/index/jisong/adressInfo'
				});
			},
			songAdressInfo() {
				uni.navigateTo({
					url: '/pages/index/jisong/adressInfo'
				});
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioTypeGroupChange(Type) {			
				this.orderInfo.goodsType=Type;
				console.log(this.orderInfo.goodsType);
			},
			// 选中任一radio时，由radio-group触发
			radioWeightGroupChange(Weight) {
				this.orderInfo.goodsWeight=Weight;
				console.log(this.orderInfo.goodsWeight);
			},
			timeComfirm(quTime){
				this.orderInfo.quTime=quTime.month+":"+quTime.day+":"+quTime.hour+":"+quTime.minute;
				console.log(this.orderInfo.quTime);
			},
			clickConfrim(){
				this.orderInfo.goodInfo=this.orderInfo.goodsType+"-"+this.orderInfo.goodsWeight;
				this.wupinshow=false;
			},
			xiaofeiConfirm(){
				console.log(this.orderInfo.xiaofei);
				this.fee=this.orderInfo.xiaofei;
				this.xiaofeishow=false;
			},
			beizhuConfirm(){
				console.log(this.orderInfo.beizhuInfo);
				this.beizhushow=false;
			},
			submitOrder(){
				console.log(this.orderInfo);
				console.log(this.quAddressForm);
			},
			submitfu(form){			
				this.orderInfo.quAddressForm=form;
				this.writeAddressShow=false;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.songSubmit {
		padding: 20rpx;
	}

	.map {
		height: 200rpx;
	}

	.quAdress {
		margin: 20px 40rpx 10rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.quInformation {
			display: flex;
			flex-direction: column;
		}
	}

	.songAdress {
		margin: 20px 40rpx 10rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.songInformation {
			display: flex;
			flex-direction: column;
		}
	}

	.orderInformation {
		margin-top: 20rpx;
		padding: 0px 40rpx 0 40rpx;
	}

	.order_item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
	}

	.submitSongOrder {
		position: absolute;
		bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.fei {
			margin-right: 300rpx;

		}
	}
</style>
